<!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>Consultas</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">

    <script>
        $(function() {
            $( "#tabs" ).tabs();
            $( "input[type=submit], a, button" ).button().click(function( event ){});
            $( "#resizable" ).resizable({});
/*            $( "#datepicker1" ).datepicker({ changeMonth: true, changeYear: true});
            $( "#datepicker2" ).datepicker({ changeMonth: true, changeYear: true});*/
            $( "#from" ).datepicker({dateFormat: "yy-mm-dd", defaultDate: "+1w",changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ) {
                $( "#to" ).datepicker( "option", "minDate", selectedDate );}});
            $( "#to" ).datepicker({ dateFormat: "yy-mm-dd", defaultDate: "+1w", changeMonth: true,numberOfMonths: 3, onClose: function( selectedDate ) {
                $( "#from" ).datepicker( "option", "maxDate", selectedDate );}});
            $( "#from1" ).datepicker({dateFormat: "yy-mm-dd", defaultDate: "+1w",changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ) {
                $( "#to" ).datepicker( "option", "minDate", selectedDate );}});
            $( "#to1" ).datepicker({ dateFormat: "yy-mm-dd", defaultDate: "+1w", changeMonth: true,numberOfMonths: 3, onClose: function( selectedDate ) {
                $( "#from" ).datepicker( "option", "maxDate", selectedDate );}});
            $( "#spinner" ).spinner({spin: function( event, ui ) {if ( ui.value > 10 ) {$( this ).spinner( "value", 0 ); return false;} else if ( ui.value < 0 ) {$( this ).spinner( "value", 0 );return false;}
                }
            });
        })
    </script>

    <script>
        function checkform(form){
            var inputs = form.getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                // only validate the inputs that have the required attribute
                if(inputs[i].hasAttribute("required")){
                    if(inputs[i].value == ""){
                        // found an empty field that is required
                        alert("Los campos deben estar completos");
                        return false;
                    }
                }
            }
            return true;
        }

    </script>
    <style>
        reziseable{
            padding: 1000px;
        }
    </style>
    <style>
        options {
            align: center;
            font-size:9px;
            float: left;
            padding: 10px;
        }
    </style>
</head>

<body>
<?php
require 'functions.php';
?>

<options>
<div id="tabs" align="center">
    <ul>
        <li><a href="#tabs-1">Consulta 1</a></li>
        <li><a href="#tabs-2">Consulta 2</a></li>
        <li><a href="#tabs-3">Consulta 3</a></li>
    </ul>

    <div id="tabs-1" align="center">
        <form action="xml1.php" method="get">
            Clientes con cantidad de máquinas mayores a 2.<br><br>
            <input type="submit" value="Enviar Consulta">
        </form>
    </div>

    <div id="tabs-2" align="center">
        <form action="xml2.php" method="get">
            Teléfonos de clientes de la zona seleccionada.<br>
            <?php echo zonesDropdown();?><br><br>
            <input type="submit" value="Enviar Consulta">
        </form>
    </div>

    <div id="tabs-3" align="center">
        <form action="xml3.php" method="get">
            Nombres de Clientes de un vendedor y una zona.<br>
            <?php echo sellersDropdown();?>
            <?php echo zonesDropdown();?><br><br>
            <input type="submit" value="Enviar Consulta">
        </form>
    </div>

</div>
</options>
</body>
</html>
